<my-pageheader></my-pageheader>

<div style="margin: 20px 20px 50px 20px">
    <mat-card style="margin-top: 20px; background-color: #f0f0f0">
        <span style="font-weight: bold; font-size: 28px">模型导入</span>
        <button mat-raised-button color="primary" style="font-size: 20px; float: right" (click)="gotoPackagingHelp()">
            模型打包指南
        </button>
    </mat-card>
    <mat-card>
        在导入模型之前，请先阅读
        <a (click)="gotoPackagingHelp()">《模型打包指南》</a>
        ，参照其步骤完成预训练模型打包...
    </mat-card>
    <mat-card>
        <div style="font-size: larger; font-weight: bold">
            第一步：上传模型文件
        </div>
        <br>
        <div>
            <input type="file" ng2FileSelect [uploader]="uploader" accept=".zip" [disabled]="uploader?.queue?.length > 0"/>
            <span *ngIf="uploader?.queue?.length > 0">
                文件大小：{{uploader.queue[0].file.size/1024 | number:'1.1-1'}}KB
            </span>
            <span  *ngIf="uploader?.queue?.length > 0">
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <span style="color: forestgreen" *ngIf="uploader.queue[0].isSuccess">
                    上传成功
                </span>
                <span style="color: #ffc107" *ngIf="uploader.queue[0].isCancel">
                    上传被取消
                </span>
                <span style="color: red" *ngIf="uploader.queue[0].isError">
                    上传失败
                </span>
            </span>
            <div class="float-right" *ngIf="uploader?.queue?.length > 0" style="vertical-align: center">
                <a (click)="upload(uploader.queue[0])" matTooltip="开始上传"
                        *ngIf="!uploader.queue[0].isReady && !uploader.queue[0].isUploading && !uploader.queue[0].isSuccess
                               && !uploader.queue[0].isCancel && !uploader.queue[0].isError">
                    <span class="fa fa-upload" style="color: #673ab7"></span>
                </a>
                <a (click)="uploader.queue[0].cancel()" matTooltip="取消上传"
                        *ngIf="uploader.queue[0].isUploading">
                    <span class="fa fa-ban" style="color: #ffc107"></span>
                </a>
                &nbsp;&nbsp;
                <a (click)="uploader.clearQueue()" matTooltip="移除"
                        *ngIf="!uploader.queue[0].isUploading && !onboardingStarted">
                    <span class="fa fa-remove" style="color: red"></span>
                </a>
            </div>
        </div>
        <br>
        <div *ngIf="uploader?.queue?.length > 0">
            <mat-progress-bar mode="determinate" [value]="uploader.progress"></mat-progress-bar>
        </div>
    </mat-card>

    <mat-card *ngIf="uploader?.queue?.length > 0 && uploader.queue[0].isSuccess">
        <div>
            <span style="font-size: larger; font-weight: bold">
                第二步：后台模型导入
                &nbsp;&nbsp;&nbsp;&nbsp;
            </span>
        </div>
        <br>

        <mat-card *ngIf="onboardingStarted">
            <div>
                ①提取模型文件
            </div>
            <mat-progress-bar mode="determinate" [value]="progressExtractModelFile" color="primary" *ngIf="statusExtractModelFile !== '失败'"></mat-progress-bar>
            <mat-progress-bar mode="determinate" [value]="progressExtractModelFile" color="warn" *ngIf="statusExtractModelFile === '失败'"></mat-progress-bar>
            <mat-form-field style="width: 100%">
                <textarea matInput style="height: 100px; font-size: small"
                          [(ngModel)]="detailExtractModelFile" [readonly]="true">
                </textarea>
            </mat-form-field>
        </mat-card>
        <mat-card *ngIf="statusExtractModelFile === '成功'">
            <div>
                ②创建模型对象
            </div>
            <mat-progress-bar mode="determinate" [value]="progressCreateSolution" color="primary" *ngIf="statusCreateSolution !== '失败'"></mat-progress-bar>
            <mat-progress-bar mode="determinate" [value]="progressCreateSolution" color="warn" *ngIf="statusCreateSolution === '失败'"></mat-progress-bar>
            <mat-form-field style="width: 100%">
                <textarea matInput style="height: 100px; font-size: small"
                          [(ngModel)]="detailCreateSolution" [readonly]="true">
                </textarea>
            </mat-form-field>
        </mat-card>
        <mat-card *ngIf="statusCreateSolution === '成功'">
            <div>
                ③添加artifact
            </div>
            <mat-progress-bar mode="determinate" [value]="progressAddArtifact" color="primary" *ngIf="statusAddArtifact !== '失败'"></mat-progress-bar>
            <mat-progress-bar mode="determinate" [value]="progressAddArtifact" color="warn" *ngIf="statusAddArtifact === '失败'"></mat-progress-bar>
            <mat-form-field style="width: 100%">
            <textarea matInput style="height: 100px; font-size: small"
                      [(ngModel)]="detailAddArtifact" [readonly]="true">
                </textarea>
            </mat-form-field>
        </mat-card>
        <mat-card *ngIf="statusAddArtifact === '成功'">
            <div>
                ④生成TOSCA文件
            </div>
            <mat-progress-bar mode="determinate" [value]="progressCreateTosca" color="primary" *ngIf="statusCreateTosca !== '失败'"></mat-progress-bar>
            <mat-progress-bar mode="determinate" [value]="progressCreateTosca" color="warn" *ngIf="statusCreateTosca === '失败'"></mat-progress-bar>
            <mat-form-field style="width: 100%">
            <textarea matInput style="height: 100px; font-size: small"
                      [(ngModel)]="detailCreateTosca" [readonly]="true">
                </textarea>
            </mat-form-field>
        </mat-card>
        <mat-card *ngIf="statusCreateTosca === '成功'">
            <div>
                ⑤创建微服务
            </div>
            <mat-progress-bar mode="determinate" [value]="progressGenerateMicroService" color="primary" *ngIf="statusGenerateMicroService !== '失败'"></mat-progress-bar>
            <mat-progress-bar mode="determinate" [value]="progressGenerateMicroService" color="warn" *ngIf="statusGenerateMicroService === '失败'"></mat-progress-bar>
            <mat-form-field style="width: 100%">
            <textarea matInput style="height: 100px; font-size: small"
                      [(ngModel)]="detailGenerateMicroService" [readonly]="true">
                </textarea>
            </mat-form-field>
        </mat-card>
        <mat-card *ngIf="getCompleteSuccess() || getCompleteFail()">
            <div class="row justify-content-center">
                <div *ngIf="getCompleteSuccess()">
                    <span class="alert alert-success" style="font-size: 18px">
                        模型导入成功！
                    </span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <button (click)="gotoToMyModel()">查看模型</button>
                </div>
                <h4 class="alert alert-danger" *ngIf="getCompleteFail()">
                    模型导入失败！
                </h4>
            </div>
        </mat-card>
        <br><br>
    </mat-card>
</div>

